<template>
  <div>
    <div>
      <div class="label-firstpart">
        <div>
          <span class="label-title1">BasicFinder HIVE</span>
          <span class="des1">企业私有化定制数据标注平台</span>
        </div>
        <div >集数据标注、任务管理为一体的私有化AI数据标注平台</div>
        <div >支持私有化部署,定制化开发,满足安全与个性化需求</div>
        <div><b-button variant="primary" size="lg" class="firstpart-button"  @click="totry">免费使用</b-button></div>
      </div>
      <!------第二部分：五张卡片------>
      <div class="five-card"  v-if="showcard1">
        <ul>
          <li >
            <h5>数据安全</h5>
            <div class="des">部署在企业私有云，充分保障核心数据不外泄，避免网络攻击</div>
          </li>
          <li>
            <h5>数据安全</h5>
            <div class="des">部署在企业私有云，充分保障核心数据不外泄，避免网络攻击</div>
          </li>
          <li>
            <h5>数据安全</h5>
            <div class="des">部署在企业私有云，充分保障核心数据不外泄，避免网络攻击</div>
          </li>
          <li>
            <h5>数据安全</h5>
            <div class="des">部署在企业私有云，充分保障核心数据不外泄，避免网络攻击</div>
          </li>
          <li>
            <h5>数据安全</h5>
            <div class="des">部署在企业私有云，充分保障核心数据不外泄，避免网络攻击</div>
          </li>
        </ul>
      </div>
      <div v-if="showcard2">
        <b-carousel
          id="carousel-1"
          v-model="slide"
          :interval="4000"
          controls
          indicators
          background="#ababab"
          img-width="1000"
          img-height="500"
          style="text-shadow: 1px 1px 2px #333;"
          @sliding-start="onSlideStart"
          @sliding-end="onSlideEnd"
        >
          <!-- Text slides with image -->
          <b-carousel-slide
            caption="数据安全"
            text="部署在企业私有云，充分保障核心数据不外泄，避免网络攻击"
            :img-src= this.card
          ></b-carousel-slide>
          <b-carousel-slide
            caption="定制开发"
            text="专业技术团队根据企业业务需求个 性化定制，快速响应"
            :img-src= this.card
          ></b-carousel-slide>
        </b-carousel>
      </div>
      <!------第三部分：产品特点------>
      <div class="produce-feature">
        <h2 class="public-title"><span>产品特点</span></h2>
        <div class="card-container">
          <b-container>
            <b-row align-h="around">
              <b-col sm="5" md="5">
                <b-card title="私有化部署" :img-src= this.feature1 img-alt="Image" img-top tag="article" class="mb-2">
                  <b-card-text class="card-text">部署在企业内部服务器，保证数据安全</b-card-text>
                </b-card>
              </b-col>
              <b-col sm="5" md="5">
                <b-card title="私有化部署" :img-src= this.feature1 img-alt="Image" img-top tag="article" class="mb-2">
                  <b-card-text class="card-text">部署在企业内部服务器，保证数据安全</b-card-text>
                </b-card>
              </b-col>
            </b-row>
            <b-row align-h="around">
              <b-col sm="5" md="5">
                <b-card title="私有化部署" :img-src= this.feature1 img-alt="Image" img-top tag="article" class="mb-2">
                  <b-card-text class="card-text">部署在企业内部服务器，保证数据安全</b-card-text>
                </b-card>
              </b-col>
              <b-col sm="5" md="5">
                <b-card title="私有化部署" :img-src= this.feature1 img-alt="Image" img-top tag="article" class="mb-2">
                  <b-card-text class="card-text">部署在企业内部服务器，保证数据安全</b-card-text>
                </b-card>
              </b-col>
            </b-row>
          </b-container>
        </div>
      </div>
      <!------第四部分：主要功能------>
      <div class="main-function">
        <h2 class="public-title"><span>主要功能</span></h2>
        <div>
          <b-carousel
            id="carousel-1"
            v-model="slide"
            :interval="4000"
            controls
            indicators
            background="#ababab"
            img-width="1024"
            img-height="480"
            style="text-shadow: 1px 1px 2px #333;"
            @sliding-start="onSlideStart"
            @sliding-end="onSlideEnd"
          >
            <!-- Text slides with image -->
            <b-carousel-slide
              caption="标注工具集"
              text="覆盖市面90%标注需求, 标注功能强大且丰富"
              img-src="https://picsum.photos/1024/480/?image=52"
            ></b-carousel-slide>

            <!-- Slides with custom text -->
            <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
              <h1>Hello world!</h1>
            </b-carousel-slide>
          </b-carousel>
        </div>
      </div>
      <!------第五部分：为您服务------>
      <div class="service">
        <h2 class="public-title"><span>为您服务</span></h2>
        <div class="card-container5">
          <div class="service-card">
            <img src="../../assets/images/label/service1.png">
            <div class="title">需求调研</div>
            <div class="text">资深产品专家负责
              现场需求调研</div>
          </div>
          <img src="../../assets/images/label/arrow.png" class="arrow">
          <div class="service-card">
            <img src="../../assets/images/label/service1.png">
            <div class="title">需求调研</div>
            <div class="text">资深产品专家负责
              现场需求调研</div>
          </div>
          <img src="../../assets/images/label/arrow.png" class="arrow">
          <div class="service-card">
            <img src="../../assets/images/label/service1.png">
            <div class="title">需求调研</div>
            <div class="text">资深产品专家负责
              现场需求调研</div>
          </div>
        </div>
      </div>
      <!------第六部分：产品定价------>
      <div class="pricing">
        <h2 class="public-title"><span>产品定价</span></h2>
        <div class="card-container6">
          <b-container>
            <b-row align-h="around">
              <b-col sm="12" md="6">
                <div class="price-card">
                  <div class="header">
                    <div>
                      <div class="title">BasicFinder LITE</div>
                      <div class="text">适用于小规模的标注项目</div>
                    </div>
                    <div>
                      <b-button size="lg" variant="outline-primary" class="button">联系我们</b-button>
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="left">
                      <ul>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li><li>
                        <div class="text-left">标注类型</div>
                        <div>10种</div>
                      </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>

                      </ul>
                    </div>
                    <div class="right">
                      <ul>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </b-col>
              <b-col sm="12" md="6">
                <div class="price-card">
                  <div class="header">
                    <div>
                      <div class="title">BasicFinder LITE</div>
                      <div class="text">适用于小规模的标注项目</div>
                    </div>
                    <div>
                      <b-button size="lg" variant="outline-primary" class="button">联系我们</b-button>
                    </div>
                  </div>
                  <div class="card-content">
                    <div class="left">
                      <ul>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                      </ul>
                    </div>
                    <div class="right">
                      <ul>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                        <li>
                          <div class="text-left">标注类型</div>
                          <div>10种</div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </b-col>
            </b-row>
          </b-container>
        </div>
      </div>
      <!------第七部分：一个介绍------>
      <div class="introduce">
        <b-container>
          <b-row align-h="around">
            <b-col sm="12" md="5">
              <img src="../../assets/images/label/vedio.png" width="250px" class="arrow">
            </b-col>
            <b-col sm="12" md="7" class="text">
              我们和 BasicFinder 合作迄今两年多，合作范围覆盖了“京东X”的大部分的内部产品，
              如无人驾驶、无人超市，以及无人机领域等。我们在这些领域均有较为超前及密集的研发任务,
              对于高质量数据集的需求也非常迫切。在与 BF 合作的过程中，BasicFinder 快速的项目响应机制
              、专业的作业管理流程 、高效的数据标注模板、高水准的交付质量，及时有效地为我们提供了全方位的数据支持。
            </b-col>
          </b-row>
        </b-container>
        <div class="jingdong"><img src="../../assets/images/label/logo.png"> 京东副总裁、京东X事业部总裁   肖军</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'labelplatform',
  data () {
    return {
      feature1: require('../../assets/images/label/feature1.png'),
      service1: require('../../assets/images/label/service1.png'),
      card: require('../../assets/images/label/card-background.png'),
      screenWidth: document.body.clientWidth,
      showcard1: false,
      showcard2: false
    }
  },
  methods: {
    totry () {
      this.$router.push({ name: 'try' })
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {
  //     // 通过 `vm` 访问组件实例
  //     window.onresize = () => {
  //       return (() => {
  //         window.screenWidth = document.body.clientWidth
  //         vm.screenWidth = window.screenWidth
  //         console.log('进入了')
  //         if (vm.screenWidth < 800) {
  //           vm.showcard2 = true
  //           vm.showcard1 = false
  //           // console.log(this.showcard2)
  //         }
  //         else {
  //           vm.showcard2 = false
  //           vm.showcard1 = true
  //           // console.log(this.showcard1)
  //         }
  //       })()
  //     }
  //   })
  // },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
        console.log('进入了')
        if (that.screenWidth < 800) {
          this.showcard2 = true
          this.showcard1 = false
          // console.log(this.showcard2)
        }
        else {
          this.showcard2 = false
          this.showcard1 = true
          // console.log(this.showcard1)
        }
      })()
    }
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值 当宽度为1000的时候就切换显示画面！！！
          console.log(that.screenWidth)
          if (that.screenWidth < 800) {
            this.showcard2 = true
            this.showcard1 = false
            // console.log(this.showcard2)
          }
          else {
            this.showcard2 = false
            this.showcard1 = true
            // console.log(this.showcard1)
          }
          console.log('showcard2:' + this.showcard1)
          console.log('showcard1:' + this.showcard1)
          that.timer = false
        }, 400)
      }
    }
  }
}
</script>

<style scoped lang="less">
  /*公用标题！！！*/
  .public-title{
    text-align: center;
    font-weight: 600;
    margin-bottom: 50px;
    span{
      border-bottom: 3px solid #409eff;
    }
  }
  .label-firstpart{
    color: white;
    background-color: #353940;
    padding-left: 10%;
    padding-top: 200px;
    .label-title1{
      /*overflow: visible;*/
      display: block;
      /*margin-bottom: 20px;*/
      font-size: 48px;
      font-weight: 700;
      overflow: hidden;
    }
    .des1{
      font-weight: 700;
      //相当于在左边加padding 可是要有display=block才生效
      display: block;
      text-indent: 4em;
      font-size: 35px;
      /*margin-left: 30px;*/

    }
    .firstpart-button{
      width: 200px;
      height: 42px;
      font-weight: 700;
      padding: 5px 0 5px 0;
      margin-top: 20px;
      margin-bottom: 100px;
      font-size: 18px;
    }
    .home-sixpart{
      font-size: 20px;
      font-weight: 500;
    }
  }
  .five-card{
    color: white;
    background-color: #353940;
    ul{
      display: flex;
      justify-content: space-around;
    }
    li{
      list-style: none;
      display: inline-block;
      padding: 25px 15px 30px;//左右15
    }
    h5{
      margin-bottom: 30px;
    }
    .des{
      font-size: 14px;
      color: #999;
    }
  }
  .produce-feature{
    margin: 40px 0 60px;
    .card-container{
      margin: 0 50px 0;
      .card-title {
        font-weight: 500;
        text-align: center;
      }
      .card-text{
        color: #999;
      }
    }
  }
  .main-function{
    /*margin-bottom: 50px;*/
  }
  .service{
    padding: 40px 0 60px;
    background-color: #f7fafa;
    font-size: 10px;
    .card-container5{
      padding: 0 50px;
      .service-card{
        margin-top: 30px;
        border: 1px solid rgba(0, 0, 0, 0.125);
        text-align: center;
        img{
          /*padding: 3% 30%;*/
        }
        .title{
          font-size: 20px;
          font-weight: 700;
          margin-bottom: 20px;
        }
        .text{
          color: #a1a1a1;
          margin-bottom: 20px;
          font-size: 15px;
        }
      }
      .arrow{
        position: absolute;
        left: 48%;
      }
    }

  }
  .pricing{
    padding: 50px 0;
    .card-container6{
      .price-card{
        box-shadow: 0 0 10px #01a0ea;
      }
      .header{
        padding: 20px 20px;
        display: flex;
        justify-content: space-between;
        .title{
          font-size: 20px;
          font-weight: 700;
        }
        .text{
          font-size: 14px;
        }
      }
      .card-content{
        display: flex;
        justify-content: space-between;
        margin: 10px;
        padding: 10px 0;
        border-top: 1px solid #e8e8e8;
        li{
          display: flex;
          justify-content: space-between;
        }
        .left{
          width: 50%;
          border-right: 1px solid #e8e8e8;
          padding-right: 10px;
          .text-left{
            font-size: 14px;
            color: #999;
            line-height: 2;
            padding-left: 10px;
          }
        }
        .right{
          width: 50%;
          padding-right: 10px;
          .text-left{
            font-size: 14px;
            color: #999;
            line-height: 2;
            padding-left: 10px;
          }
        }
      }
    }
  }
  .introduce{
    margin: 20px 0;
    .text{
      text-indent: 2em;
      line-height: 2;
    }
    .jingdong{
      text-align: right;
      padding-right: 20px;
      padding-top: 20px;
    }
  }
</style>
